<template>
  <div class="default-settings">
    <h2 class="settings-section-title">分销默认设置</h2>
    <div class="settings-section">
      <div class="form-group">
        <label class="form-label">默认佣金比例</label>
        <div class="commission-rate-control">
          <input
            type="number"
            v-model="commissionRate"
            min="0"
            max="100"
            class="form-control"
          />
          <span class="percentage-symbol">%</span>
        </div>
        <div class="form-help">设置您创建新的支付链接时的默认佣金比例</div>
      </div>
      
      <div class="form-group">
        <label class="form-label">支付链接保存模式</label>
        <div class="save-mode-options">
          <label class="radio-option">
            <input type="radio" v-model="saveMode" value="always" />
            <span>总是保存</span>
          </label>
          <label class="radio-option">
            <input type="radio" v-model="saveMode" value="ask" />
            <span>询问我</span>
          </label>
          <label class="radio-option">
            <input type="radio" v-model="saveMode" value="never" />
            <span>从不保存</span>
          </label>
        </div>
        <div class="form-help">设置创建支付链接后是否自动保存到您的链接列表</div>
      </div>
    </div>
    
    <h2 class="settings-section-title">通知设置</h2>
    <div class="settings-section">
      <div class="form-group">
        <label class="form-label">通知类型</label>
        <div class="notification-options">
          <label class="checkbox-option">
            <input type="checkbox" v-model="notificationTypes.orders" />
            <span>订单通知</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" v-model="notificationTypes.commissions" />
            <span>佣金通知</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" v-model="notificationTypes.withdrawals" />
            <span>提现通知</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" v-model="notificationTypes.system" />
            <span>系统通知</span>
          </label>
        </div>
        <div class="form-error" v-if="showNotificationTypeError">
          请至少选择一种通知类型
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">通知方式</label>
        <div class="notification-options">
          <label class="checkbox-option">
            <input type="checkbox" v-model="notificationMethods.app" />
            <span>App通知</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" v-model="notificationMethods.email" />
            <span>电子邮件</span>
          </label>
        </div>
        <div class="form-error" v-if="showNotificationMethodError">
          请至少选择一种通知方式
        </div>
      </div>
    </div>
    
    <div class="settings-actions">
      <button 
        class="btn btn-secondary" 
        @click="resetToDefault"
      >
        恢复默认
      </button>
      <button 
        class="btn btn-primary" 
        @click="saveSettings" 
        :disabled="isSaving || !canSave"
      >
        {{ isSaving ? '保存中...' : '保存设置' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'

// 定义通知类型和通知方式的接口
interface NotificationTypes {
  orders: boolean;
  commissions: boolean;
  withdrawals: boolean;
  system: boolean;
  [key: string]: boolean;
}

interface NotificationMethods {
  app: boolean;
  email: boolean;
  [key: string]: boolean;
}

// 分销默认设置
const commissionRate = ref(10)
const saveMode = ref('ask') // 'always', 'ask', 'never'

// 通知设置
const notificationTypes = reactive<NotificationTypes>({
  orders: true,
  commissions: true,
  withdrawals: true,
  system: true
})

const notificationMethods = reactive<NotificationMethods>({
  app: true,
  email: false
})

// 表单状态
const isSaving = ref(false)
const showNotificationTypeError = ref(false)
const showNotificationMethodError = ref(false)

// 计算属性
const canSave = computed(() => {
  const hasNotificationType = Object.values(notificationTypes).some(v => v)
  const hasNotificationMethod = Object.values(notificationMethods).some(v => v)
  
  return hasNotificationType && hasNotificationMethod
})

// 初始化数据
onMounted(async () => {
  try {
    // 模拟从API获取数据
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 模拟后端返回的数据
    const data = {
      commission_rate: 15,
      save_mode: 'always',
      notification_types: {
        orders: true,
        commissions: true,
        withdrawals: false,
        system: true
      },
      notification_methods: {
        app: true,
        email: true
      }
    }
    
    // 更新本地状态
    commissionRate.value = data.commission_rate
    saveMode.value = data.save_mode
    
    // 更新通知类型
    Object.keys(notificationTypes).forEach(key => {
      if (key in data.notification_types) {
        notificationTypes[key] = data.notification_types[key as keyof typeof data.notification_types]
      }
    })
    
    // 更新通知方式
    Object.keys(notificationMethods).forEach(key => {
      if (key in data.notification_methods) {
        notificationMethods[key] = data.notification_methods[key as keyof typeof data.notification_methods]
      }
    })
  } catch (error) {
    console.error('加载默认设置失败', error)
  }
})

// 方法
const validateForm = () => {
  let isValid = true
  
  // 验证通知类型
  const hasNotificationType = Object.values(notificationTypes).some(v => v)
  showNotificationTypeError.value = !hasNotificationType
  
  if (!hasNotificationType) {
    isValid = false
  }
  
  // 验证通知方式
  const hasNotificationMethod = Object.values(notificationMethods).some(v => v)
  showNotificationMethodError.value = !hasNotificationMethod
  
  if (!hasNotificationMethod) {
    isValid = false
  }
  
  return isValid
}

const resetToDefault = () => {
  // 恢复默认设置
  commissionRate.value = 10
  saveMode.value = 'ask'
  
  // 恢复默认通知设置
  Object.keys(notificationTypes).forEach(key => {
    notificationTypes[key] = true
  })
  
  notificationMethods.app = true
  notificationMethods.email = false
  
  // 清除错误提示
  showNotificationTypeError.value = false
  showNotificationMethodError.value = false
}

const saveSettings = async () => {
  // 表单验证
  if (!validateForm()) {
    return
  }
  
  if (isSaving.value) return
  
  isSaving.value = true
  
  try {
    // 构建提交的数据
    const settings = {
      commission_rate: commissionRate.value,
      save_mode: saveMode.value,
      notification_types: { ...notificationTypes },
      notification_methods: { ...notificationMethods }
    }
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 800))
    console.log('保存的设置:', settings)
    
    // 清除错误提示
    showNotificationTypeError.value = false
    showNotificationMethodError.value = false
    
    // 成功提示
    alert('设置已保存')
  } catch (error) {
    console.error('保存设置失败', error)
    alert('保存失败，请重试')
  } finally {
    isSaving.value = false
  }
}
</script>

<style scoped lang="scss">
.default-settings {
  max-width: 800px;
  margin: 0 auto;
}

.settings-section-title {
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

.settings-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  
  &:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
}

.form-help {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #666;
}

.form-error {
  margin-top: 0.5rem;
  color: #f5222d;
  font-size: 0.875rem;
}

.commission-rate-control {
  position: relative;
  max-width: 200px;
  
  input {
    padding-right: 2rem;
  }
  
  .percentage-symbol {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
  }
}

.save-mode-options,
.notification-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  
  input {
    margin-right: 0.5rem;
  }
  
  span {
    font-size: 0.95rem;
  }
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  
  &:hover:not(:disabled) {
    background-color: #40a9ff;
  }
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
  
  &:hover:not(:disabled) {
    background-color: #e0e0e0;
  }
}
</style> 